<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>文案列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div class="el-card-button">
                <el-button type="primary" size="small" @click="addRecharge">添加文案</el-button>
            </div>
            <el-table
                    size="small"
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="#">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题">
                </el-table-column>
                <el-table-column
                        prop="mark"
                        label="标识">
                </el-table-column>
                <el-table-column
                        width="150"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" plain size="small" @click="edit(scope.row.id)">修改</el-button>
                        <el-button type="danger" plain size="small" @click="remove(scope.row.id)">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>
            <div class="el-pagination">
                <el-pagination
                        background
                        @size-change="changeSize"
                        @current-change="changeCurrent"
                        :current-page="params.pagenum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="params.pagesize"
                        :total="params.totals"
                        :layout="this.$store.state.paginationLayout">
                </el-pagination>
            </div>
            <el-dialog :title="fromTitle" :width="this.$store.state.dialogWidth" :visible.sync="visible">
                <el-row :gutter="20">
                    <el-col :span="this.$store.state.elColNum">
                        <el-form ref="form" :label-width="this.$store.state.labelWidth" size="small">
                            <el-form-item label="规则名称">
                                <el-input v-model="form.title"></el-input>
                            </el-form-item>
                            <el-form-item label="规则标识">
                                <el-input v-model="form.mark"></el-input>
                            </el-form-item>
                            <el-form-item label="规则内容">
                                <quill-editor
                                        v-model="form.content"
                                        ref="myQuillEditor"
                                        :options="editorOption">
                                </quill-editor>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                <el-button @click="visible=false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    import {isRealNum} from '../../utils/common'
    import quillConfig from '../../utils/quill-config.js'
    export default {
        name: "Comic_Release",
        data() {
            return {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    totals: 0
                },
                editorOption:quillConfig,
                tableData: [],
                form: {
                    title: '',
                    mark: '',
                    content: '',
                },
                fromTitle: '新增',
                visible: false,
                id: '',
            }
        },
        created() {
            this.getList()
        },
        methods: {
            addRecharge() {
                this.fromTitle = '新增';
                this.id = '';
                this.form = {
                    title: '',
                    list_order: '',
                    type: '',
                    status: '',
                };
                this.visible = true;
            },
            // 每页显示多少条
            changeSize(val) {
                this.params.pagesize = val;
                this.getList();
            },
            // 当前显示的页数
            changeCurrent(val) {
                this.params.pagenum = val;
                this.getList()
            },
            getList() {
                let data = {
                    page: this.params.pagenum,
                    page_size: this.params.pagesize,
                };
                this.$axios.post("admin/illustration/index", data).then((res) => {
                    this.params.totals = parseInt(res.data.count);
                    this.tableData = res.data.list;
                });
            },
            // 编辑用户
            edit(id) {
                this.id = id;
                this.fromTitle = '编辑';
                this.$axios.get('admin/illustration/' + id, {}).then((res) => {
                    let data = res.data;
                    for (let key in data) {
                        if (isRealNum(data[key])) {
                            data[key] = data[key].toString()
                        }
                    }
                    this.form = data;
                    this.visible = true;
                });
            },
            // 确认提交添加或编辑用户
            dialogAffirm() {
                if (this.id) {
                    this.$axios.put('admin/illustration/' + this.id, this.form).then((res) => {
                        this.$message.success('成功');
                        this.getList();
                        this.visible = false;
                    });
                } else {
                    // 添加
                    this.$axios.post('/admin/illustration', this.form).then((res) => {
                        this.$message.success('成功');
                        this.getList();
                        this.visible = false;
                    });
                }
            },
            remove(id) {
                this.$confirm('确定要进行操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.del('admin/illustration/' + id, '').then((res) => {
                        this.$message.success('删除成功!');
                        this.getList();
                    });
                }).catch(() => {

                });
            },
        }
    }
</script>

<style scoped>

</style>